/**
  transition 组件封装
 */

<template>
  <div>
    <div class="content-box">
      <span class="iconfont">&#xe6ad;</span>
      <span class="iconfont icon-zanting"></span>

      <button @click="onToggle">toggle</button>
      <fade :show="isShow">
        <div>是否显示</div>
        
      </fade>
    </div>
    
    <h5>功能：transition 组件封装</h5>
    <ol class="desc-box">
      <li>transition 钩子函数的使用</li>
      <li>Velocity 的使用</li>
    </ol>
  </div>
</template>

<script>
import Vue from 'vue'
Vue.component('fade',{
  props:['show'],
  // 下面 template-slot 这里只能用 v-if ，v-show不行
  template:`
    <transition
        @before-enter="onBeforeEnter"
        @enter="onEnter"
        @after-enter="onAfterEnter"
      >
        <slot v-if="show"></slot>
    </transition>
  `,
  methods:{
    /**
     * 显示 - 开始进入动画
     */
    onBeforeEnter(el){
      el.style.color = '#f90'
      // el.innerHTML = '显示 - 开始进入动画 - onBeforeEnter'
    },
    /**
     * 显示 - 进入动画
     * 多个 done ,若没有done，则无法进行下一步，这是 enter 特别之处
     */
    onEnter(el, done){
      setTimeout(() => {
        el.style.color = '#f00'
        // el.innerHTML = '显示 - 进入动画 - onEnter'
      },1000)
      setTimeout(() => {
        done()
      },2000)
    },
    /**
     * 显示 - 进入动画后
     */
    onAfterEnter(el){
      el.style.color = '#000'
      // el.innerHTML = '显示 - 进入动画后 - onAfterEnter'
    }
  }
})
export default {
  data() {
    return {
      isShow: true
    };
  },
  mounted(){
    // console.log(Velocity)
  },
  methods: {
    onToggle() {
      this.isShow = !this.isShow;
    },
  }
};
</script>
<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
  @import '~scss/varible.scss';
  .iconfont{
    background: $bg;
  }
</style>
